<input type="text" name="" id="" />
<ul></ul>
<script>
  /*
   1获取input
   2给input 添加事件
   3 获取input的value
   4发送ajax 请求获取数据
  5数据进行处理
  	1.JSON转为对象
   */
  //11获取input
  let iptTag = document.querySelector("input")
  let ulTag = document.querySelector("ul")
  //2 给input 添加事件
  iptTag.oninput = function () {
    let inputData = this.value

    const xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          //解构赋值 得到数据数组
          let { g: res } = JSON.parse(xhr.responseText)
          ulTag.innerHTML = ""

          //创建虚拟文档节点的  SEO
          let fragmentTag = document.createDocumentFragment()
          //遍历res 生成每个li 添加到 虚拟文档节点中
          res.forEach((item) => {
            let liTag = document.createElement("li")
            liTag.innerText = item.q
            fragmentTag.appendChild(liTag)
          })
          ulTag.appendChild(fragmentTag)
        } else {
          console.log("error:", xhr.status)
        }
      }
    }
    xhr.open("get", `http://www.baidu.com/sugrec?prod=pc&wd=${inputData}`)
    xhr.send(null)
  }
</script>
